<template>
	<view class="sku-container df-ac" v-if="show">
		<view class="mask" v-if="show" @click="close"></view>
		<view class="sku">
			<view class="df mb-40">
				<image src="https://z3.ax1x.com/2021/08/08/fluk7Q.jpg"  class="mr-30" mode="" style="width: 190rpx;height: 190rpx;border-radius: 10rpx;"></image>
				<view>
					<view class="c-fe mb-22"><text class="fz24">￥</text><text class="fz42 fw-b">128.00</text> <text class="fz26 c-ccc ml-14" style="text-decoration: line-through;">￥550.00</text></view>
					<view class="df mb-22">
						<view class="c-57  fz18 tag-carriage">运费到付</view>
						
					</view>
					<view class="fz22 c-72">库存：52件</view>
				</view>
			</view>
			<view class="fz30 c-72 mb-20">选择颜色</view>
			<view class="df wrap">
				<view class="type-item" v-for="item in 9" :key="item">蓝色</view>
			</view>
			<view class="fz30 c-72 mb-20">选择规格</view>
			<view class="df wrap">
				<view class="type-item active">EU 10</view>
			</view>
			<view class="fz30 c-72 mb-20">购买数量</view>
			<view class="num-add df-ac mb-40" style="position: relative;">
				<view class="num-op" @click="sub">-</view>
				<input type="number" v-model="num" class="input tac fz24">
				<view class="num-op" @click="add">+</view>
			</view>
			<view class="btn-add-car" @click="onsubmit('add')">加入购物车</view>
		</view>
	</view>
</template>

<script>
	import {getCart, setCart , setGoodsData, getToken} from '@/utils/auth.js'
	export default {
		props:{
			good:{
				type:Object
			},
			show:{
				type:Boolean,
				default:false
			}
		},
		watch: {
			show(nv,ov) {
				this.isShow = nv
				
			}
		},
		data() {
			return {
				check:false,
				num:1,
				isShow:false
			};
		},
		methods:{
			close() {
				this.isShow = false
				this.$emit('close')
			},
			add(){
				this.num = this.num + 1
			},
			sub(){
				var num = this.num - 1
				num = num > 0 ? num : 1;
				this.num = num
			},
			//添加购物车
			onsubmit(value) {
			  // 此处应该判断是否登录 如果没登录 跳转到登录页
			  if(!getToken()){
				uni.navigateTo({ //登录
					url:'/pages/login/login'
				})
				return
			  }
			  //提交购物车
			 if(this.skulength != this.nowList.sku.length){ //如果规格长度和所选规格长度不相等 提示
			 	uni.showToast({
			 		title: '请选择规格',
			 		icon: 'none'
			    });
			 }else {
				//此处应调用接口来添加购物车 现模拟添加到购物车
				var datas = this.nowList
				if(this.issku == true){ //判断当前商品是不是规格商品
					datas.selectSku = this.currentSku
				}
				datas.number = this.number
				if(value == 'add'){ //如果是添加购物车
				console.log(datas);
					setCart(datas)
					// 存储商品数据
					uni.showToast({
					  title: '加入购物车成功 !',
					  icon: 'none'
					});
					/**
					 * 模拟获取购物车的数量 getCart
					 */
					let cart = getCart().length
					uni.setTabBarBadge({
					  //给tabBar添加角标
					  index: 2,
					  text: String(cart)
					});
				}else{ //如果是购买商品
					let goods = []
					goods.push(datas)
					setGoodsData(goods) //存储商品信息和商品规格
					uni.navigateTo({  //提交订单
						url:'/pages/views/order/confirmOrder'
					})
				}
			    setTimeout(() => {
				  this.$emit('onhide')
			    }, 800);
			  }
			},
		}
	}
</script>

<style lang="scss">
.sku-container {
	.mask {
		background-color: rgba(0,0,0,.4);
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	.sku {
		padding: 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		position: fixed;
		width: 100vw;
		z-index: 1100;
		background-color: #fff;
		bottom: 0;
		.tag-carriage {
			padding: 10rpx;
			background-color: rgba(87,59,209,.1);
			color: #573BD1;
		}
		.type-item {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #727C8E;
			background-color: #F5F5F5;
			border-radius: 7rpx;
			font-size: 22rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			&:nth-child(4n) {
				margin-right: 0;
			}
			&.active {
				background-color: rgba(254,86,52,0.1);
				border: 1px solid rgba(254,86,52,1);
				color: #FE5634;
				
			}
		}
		.btn-add-car {
			background: linear-gradient(225deg,#ff9668, #ff5d72);
			border-radius: 7rpx;
			box-shadow: 0px 7rpx 22rpx -7rpx rgba(255,121,109,0.70); 
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
		}
	}
}
</style>
